<template>
  <div class="menu-tpl">
        <div class="menu-wrapper" ref="menuWrapper">
            <ul>
                <li v-for="item in menuList" class="menu-item text-center" :class="{'current':menuItemId==item.catId}"  @click="selectMenu(item)">
                    <span class="text">{{item.name}}</span>
                </li>
            </ul>
        </div>
        <div class="foods-wapper" ref="foodsWrapper">
            <ul>
                <li v-for="list in menuList">
                    <ul class="clear-both" v-for="item in list.children"  v-show="menuItemId==item.parentId">
                        <h1 class="title">{{item.name}}</h1>
                        <li class="float-left foods-item" :class="{'active-item':child.checked}" v-for="child in item.children" @click="selectItem(child)"> 
                            <a>{{child.name}}</a>
                        </li>
                    </ul>               
                </li>
            </ul>
        </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll';
export default {
    name: 'menuTpl',
    props:{
        menuList:{
            type:Array
        }
    },
    created(){

    },
    data () {
        return {
            menuItemId:12473
        }
    },
    watch:{
        "menuList"(n,o){
            let vm =this;
            vm.$nextTick(()=>{
                vm.initScroll();
            })
        }
    },
    methods:{
        initScroll(){
            this.menuScroll=new BScroll(this.$refs.menuWrapper,{click: true})
            this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{click: true})
        },
        selectMenu(item){
            this.menuItemId=item.catId;
            this.foodsScroll=new BScroll(this.$refs.foodsWrapper,{click: true})
        },
        selectItem(val){
            let vm =this
            if(val.checked==undefined){
                vm.$set(val,'checked',true)
            }else{
                val.checked=true
            }
            setTimeout(()=>{
                vm.$emit('select',val)
                val.checked=false
            },300)
        }
    },
    mounted(){
        let vm =this;
        vm.$nextTick(()=>{
            vm.initScroll();
        })
    }
}
</script>


<style scoped lang="scss">
.menu-tpl{
    position:absolute;
    top:1.333333rem;
    bottom:1.333333rem;
    width:100%;
    display:flex;
    overflow:hidden;
    .menu-wrapper{
        flex:0 0 2.133333rem;
        width:2.133333rem;
        background:#F8F8F8;
        .menu-item{
            display:table;
            height:1.44rem;
            width:2.133333rem;
            line-height:.373333rem;
            border-bottom:.013333rem solid #ececec;
            border-right:.013333rem solid #ececec;
            color:#333;
            .text{
                font-size:.346667rem;
                display:table-cell;
                vertical-align: middle;    
            }
        }
        .current{
            background:#fff;
            color:#e4393c;
            border-right:.013333rem solid #fff;
        }
    }
    .foods-wapper{
        flex:1;
        background:#fff;
        .title{
            padding:.2rem .6rem;
            border-bottom:.013333rem dashed #ececec;
            color:#333;
            font-weight:bold;
            margin:.4rem 0;
        }
        .foods-item{
            padding:.4rem .5rem;
            color:#333;
        }
        .active-item{
            color:#e4393c;
        }
    }
}
</style>
